<template>
  <el-card>
    <el-upload
      ref="upload"
      :action="`${BASE_API}/eduservice/subject`"
      :on-success="onSuccess"
      :on-error="onError"
      :auto-upload="false"
      :limit="1"
      accept=".xls,.xlsx"
    >
      <template #trigger>
        <el-button size="small" type="primary">选取文件</el-button>
      </template>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <el-tag>
        <i class="el-icon-download"></i>
        <a :href="'/static/excel/CourseListTemplate.xlsx'" target="_blank"
          >点击下载模板</a
        >
      </el-tag>
      <template #tip>
        <div class="el-upload__tip">只能上传 .xls,.xlsx 文件</div>
      </template>
    </el-upload>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { BASE_API } from "@/config";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const upload: any = ref(null);
const router = useRouter();

const onSuccess = (res) => {
  ElMessage.success("上传成功");
  router.push("/Course/List");
  console.log(res);
};

const onError = (err) => {
  ElMessage.error("上传失败，请稍后再试！");
  console.log(err, "err");
};

const submitUpload = () => {
  upload.value.submit();
};
</script>

<style lang="less" scoped>
.el-tag {
  margin-left: 15px;
}
</style>